<template>
<div>
    <el-breadcrumb separator="/" style="margin-bottom: 20px;">
      <el-breadcrumb-item :to="{ path: '/' }">商家信息</el-breadcrumb-item>
      <el-breadcrumb-item>联系商家</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 搜索 -->
      <el-form ref="SellerFormRef" :model="SellerForm" label-width="120px">
        <el-row>
          <el-col :lg="8" :md="12" :sm="12" :xs="24">
            <el-form-item label="店铺名">
              <el-input
                v-model="SellerForm.shopname"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5" style="text-align: right;">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>

      <!-- 表格 -->
      <el-table
        :data="sellerData"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        style="width: 100%;"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          v-for="(item, index) in tableColumn"
          :key="index"
          :prop="item.prop ? item.prop : undefined"
          :label="item.label"
          align="center"
          :width="item.width"
        >
          <template slot-scope="scope">
            <div v-if="item.type === 'role'">
              {{ scope.row[item.prop] | role }}
            </div>
            <img
              v-if="item.type === 'img'"
              :src="scope.row[item.prop]"
              alt=""
              style="width: 150px; height: 120px;"
            />
            <div v-else-if="item.type === 'date'">
              {{ scope.row[item.prop] | timeFilter }}
            </div>
            <div v-else>{{ scope.row[item.prop] }}</div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="text-align: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-row>
    </el-card>
    </div>
</template>
<script>
import { mapState } from "vuex";
const tableColumn = [
  { label: "商铺名", prop: "shopname", type: "text" },
  { label: "商铺地址", prop: "address", type: "text" },
  { label: "责任人", prop: "seller", type: "text" },
  { label: "开店日期", prop: "opShopTime", type: "date" },
  { label: "营业执照", prop: "sellerImg", type: "img", width: 200 },
  { label: "联系电话", prop: "phone", type: "text" }
];
export default {
  data() {
    return {
      SellerForm: {},
      sellerData: [],
      addForm: {},
      fileList: [],
      BASEURL: "http://localhost:5000",
      currentPage: 5,
      total: 0,
      pageSize: 5,
      pageNum: 1,
      tableColumn,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.SellerForm.pageSize = this.pageSize;
      this.SellerForm.pageNum = this.pageNum;
      this.$api
        .get("/api/seller/list", { params: this.SellerForm })
        .then(res => {
          this.sellerData = res.data.data.records;
          this.total = res.data.data.total;
        })
        .catch(err => {
          console.log(err);
          this.$message.error("获取列表失败");
        });
    },
    search() {
      this.pageNum = 1;
      this.getList();
    },
    reset() {
      this.pageNum = 1;
      this.SellerForm = {};
      this.getList();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getList();
    }
  }
};
</script>